<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <ul class="w-full lg:w-52 group-list p-2 shadow" ref="groupListRef">
      <li
          v-for="(item, index) in groupList"
          :key="item"
          @click="getList(item,index)"
      >
        <span class="pl-3">{{ item.label }}</span></li>
    </ul>
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <template #operationBeforeExtend="{ record }">
        <a-link
            v-auth="options.see?.auth || []"
            v-role="options.see?.role || []"
            type="primary"
            :disabled="(isFunction(options.see?.disabled) ? options.see?.disabled(record) : options.see?.disabled)"
            @click="declarationAction(record)"
        >申报选项
        </a-link>
      </template>
      <template #tableAfterButtons>
        <button-group :button-groups="buttonGroups" :crud-ref="crudRef" :selected="selected"
                      />
      </template>
    </ma-crud>
    <declaration ref="declarationFrom"></declaration>
  </div>
</template>
<script setup>
import {ref, reactive, nextTick,computed} from 'vue'
import service from '@/api/logistics/service'
import {isFunction} from "lodash";
import Declaration from "@/views/logistics/service/forms/declaration.vue";
import ButtonGroup from "@cps/actions/buttonGroup.vue";

const crudRef = ref()
const groupListRef = ref()
const groupList = computed(() => {
  let list = [{'label':'全部','value':null}]
  let dict = crudRef.value?.getColumnService().getDictService('service_group_id')?.getRawDictData();
  if(dict){
    list = list.concat(JSON.parse(JSON.stringify(dict)))
  }
  list = list.concat([{'label':'未分配','value':0}])
  return list
})
const declarationFrom = ref(false)
const selected = computed(() => crudRef.value?.selecteds)
const buttonGroups = [
{
    title: '批量修改',
    api: service.batchUpdate,
    auth: ['logistics:service:batchUpdate'],
    form: {
      columns: [
        {
          title: '服务分组', dataIndex: 'service_group_id', formType: 'select',
          dict: {
            url: '/logistics/serviceGroup/list',
            props: {label: 'name', value: 'id'},
            params: {select: 'id,name',orderBy:'sort',orderType:'desc'},
            translation: true
          }
        },
        {
          title: '末端派送方式', dataIndex: 'end_delivery_type', formType: 'select',
          dict: {
            name:'endDeliveryType'
          }
        },
        {
          title: '状态', dataIndex: 'status', formType: 'select',
          dict: {
            data:[
              {label:'启用',value:1},
              {label:'禁用',value:0}
            ]
          }
        },
        {
          title: '询价区域', dataIndex: 'send_type', formType: 'select',
          dict: {
            data:[
              {label: '美东', value: 1},
              {label: '美西', value: 2},
            ]
          }
        },
      ]
    },
  },
]

const getList = (item, index) => {
  const children = groupListRef.value.children
  if (!children || children[index].className.indexOf('active') !== -1) {
    console.log(children[index], index)
    return;
  }
  for ( let i = 0; i < children.length; i++) i!==index && (children[i].className = '')
  children[index].className = 'active'
  crudRef.value.requestParams.service_group_id = item.value
  crudRef.value.refresh()
}
const options = reactive({
  id: 'service',
  pageLayout: 'fixed',
  rowSelection: {
    showCheckedAll: true
  },
  requestParams: {
    orderBy: 'service_group_id',
    order: 'asc',
  },
  pk: 'id',
  operationColumn: true,
  operationColumnWidth: 160,
  formOption: {
    viewType: 'drawer',
    width: '80%',

    layout: [
      {
        formType: 'tabs',
        // type: 'text',
        // type: 'rounded',
        type: 'card',
        // type: 'card-gutter',
        trigger: 'hover',
        tabs: [
          {
            title: '基础信息',
            formList: [
              {
                formType: 'grid-tailwind',
                colNumber: 2,
                cols: [
                  {
                    formList: [
                      {dataIndex: "id"},
                      {dataIndex: "code"},
                      {dataIndex: "service_group_id"},
                      {dataIndex: "name"},
                      {dataIndex: "supplier_service_id"},
                      {dataIndex: "type"},
                      {dataIndex: "service_case"},
                      {dataIndex: "charge_mode"},
                      {dataIndex: "weight_mode"},
                      {dataIndex: "charge_weight_type"},
                      {dataIndex: "carry_mode"},
                      {dataIndex: "volume_weight_radix"},
                      {dataIndex: "volume_weight_radix_change"},
                      {dataIndex: "shipment_id_format"},
                      // {dataIndex: "label_code"},
                      {dataIndex: "status"},
                      {dataIndex: "is_show"},
                      {dataIndex: "cancel_method"},
                      {dataIndex: "from_address"},
                      {dataIndex: "remark"},
                    ]
                  },
                  {
                    formList: [
                      {dataIndex: "is_battery"},
                      {dataIndex: "is_validation_address_code"},
                      {dataIndex: "country"},

                      {dataIndex: "dif_weight_warning"},
                      {dataIndex: "dif_weight_range_value"},
                      {dataIndex: "declarations_later_added"},
                      {dataIndex: "currency_type"},
                      {dataIndex: "end_delivery_type"},
                      {dataIndex: "send_type"},
                      // {dataIndex: "attrs"},
                      // {dataIndex: "volume_weight_radix_ratio"},
                      {dataIndex: "signature_service"},
                      {dataIndex: "created_by"},
                      {dataIndex: "updated_by"},
                      {dataIndex: "created_at"},
                      {dataIndex: "updated_at"},
                      {dataIndex: "deleted_at"},
                      {dataIndex: "bit_control"},
                    ]
                  },
                ]
              }
            ]
          },
          {
            title: '计费规则',
            formList: [
              {
                formType: 'grid-tailwind',
                colNumber: 2,
                cols: [
                  {
                    formList: [
                      // {formType:"card", formList:[]},
                      {dataIndex: "min_parcel_qty"},
                      {dataIndex: "max_parcel_qty"},
                      {dataIndex: "min_parcel_actual_weight"},
                      {dataIndex: "min_parcel_volume_weight"},
                      {dataIndex: "min_parcel_chargeable_weight"},
                      {dataIndex: "min_parcel_average_weight"},
                      {dataIndex: "min_shipment_chargeable_weight"},
                      {dataIndex: "min_shipment_actual_weight_required"},
                      {dataIndex: "max_shipment_actual_weight_required"},
                      {dataIndex: "min_shipment_chargeable_weight_required"},
                      {dataIndex: "max_shipment_chargeable_weight_required"},
                      {dataIndex: "min_parcel_actual_weight_required"},
                      {dataIndex: "max_parcel_actual_weight_required"},
                      {dataIndex: "min_parcel_chargeable_weight_required"},
                      {dataIndex: "max_parcel_chargeable_weight_required"},
                    ]
                  },
                  {
                    formList: [
                      {dataIndex: "shipment_step_weight"},
                      {dataIndex: "parcel_step_weight"},
                      {dataIndex: "step_size"},
                    ]
                  }
                ]
              }
            ]
          },
          {
            title: '报关规则',
            formList: [
              {
                formType: 'grid-tailwind',
                colNumber: 2,
                cols: [
                  {
                    formList: [
                      {dataIndex: "exportwith"},
                      {dataIndex: "default_exportwith"},
                      {dataIndex: "importwith"},
                      {dataIndex: "default_importwith"},
                      {dataIndex: "taxwith"},
                      {dataIndex: "default_taxwith"},
                      {dataIndex: "deliverywith"},
                      {dataIndex: "default_deliverywith"}
                    ]
                  }
                ]
              }
            ]
          }
        ],
      },
    ]
  },
  api: service.getList,
  recycleApi: service.getRecycleList,
  add: {
    show: true,
    api: service.save,
    auth: ['logistics:service:save']
  },
  edit: {
    show: true,
    api: service.update,
    auth: ['logistics:service:update']
  },
  delete: {
    show: true,
    api: service.deletes,
    auth: ['logistics:service:delete'],
    realApi: service.realDeletes,
    realAuth: ['logistics:service:realDeletes']
  },
  recovery: {
    show: true,
    api: service.recoverys,
    auth: ['logistics:service:recovery']
  },
  import: {
    url: 'logistics/service/import',
    templateUrl: 'logistics/service/downloadTemplate', auth: [], role: [], text: '导入', show: true
  },
  export: {show: true, url: 'logistics/service/export', auth: []},
})

const changeDefault = (value, maFormObject, field) => {
  if (!maFormObject.dictList.value[field]) {
    setTimeout(() => changeDefault(value, maFormObject, field), 500)
    return;
  }

  let dictData = maFormObject.dictList.value[field].map(i => {
    return {label: i.label, value: i.value.toString()}
  })
  dictData.push({label: '强制填写', value: '255'});
  maFormObject.dictList.value['default_' + field] = dictData;
}
const columns = reactive([
  {title: "主键", dataIndex: "id", formType: "input", hide: true,},
  {
    title: "服务分组",
    dataIndex: "service_group_id",
    formType: "select",
    // multiple:true,
    dict: {
      url: '/logistics/serviceGroup/list',
      props: {label: 'name', value: 'id'},
      params: {select: 'id,name', orderBy: 'sort', orderType: 'desc'},
      translation: true
    }
  },
  {
    title: "服务名称",
    dataIndex: "name",
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入服务名称"
    }
  },
  {
    title: "服务代码",
    dataIndex: "code",
    formType: "input",
    addDisabled: false,
    editDisabled: true,
    search: true,
    commonRules: {
      required: true,
      message: "请输入服务代码"
    }
  },
  {
    title: "供应商服务",
    dataIndex: "supplier_service_id",
    formType: "select",
    virtualListProps:{},
    dict: {
      url: '/logistics/supplierService/list',
      props: {label: 'name', value: 'id'},
      params: {select: 'id,name'},
      translation: true
    }
  },
  {
    // todo title: "b2b B2B大货服务；b2c B2C小包服务；ex 大货快递",
    title: "类型",
    dataIndex: "type",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
  },
  {
    title: "末端派送方式",
    dataIndex: "end_delivery_type",
    formType: "radio",
    addDefaultValue: 1,
    type: 'button',
    dict: {
      name: 'endDeliveryType',
      translation: true
    }
  },
  {
    title: "询价区域",
    dataIndex: "send_type",
    formType: "select",
    dict: {
      data:[
        {label: '美东', value: 1},
        {label: '美西', value: 2},
      ],
      translation: true
    },
    hide: true,
  },
  {
    // todo 服务分类
    title: "服务分类",
    dataIndex: "service_case",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
  },
  {
    title: "计费方式",
    dataIndex: "charge_mode",
    formType: "radio",
    type: 'button',
    addDefaultValue: 1,
    dict: {name: 'ChargeMode', translation: true}
  },
  {
    title: "计重方式",
    dataIndex: "weight_mode",
    formType: "radio",
    type: 'button',
    addDefaultValue: 1,
    dict: {
      data: [
        {label: '票', value: 1},
        {label: '箱', value: 2}
      ],
      translation: true
    }
  },
  {
    title: "进位方式",
    dataIndex: "carry_mode",
    formType: "select",
    addDefaultValue: 1,
    dict: {
      name: 'carry_mode',
      translation: true
    }
  },
  {
    title: "计泡系数",
    dataIndex: "volume_weight_radix",
    addDefaultValue: '5000',
    formType: "input"
  },
  {
    title: "计泡系数是否可改",
    dataIndex: "volume_weight_radix_change",
    formType: "radio",
    type: 'button',
    hide: true,
    dict: {
      data: [
        {label: '是', value: 1},
        {label: '否', value: 0}
      ]
    }
  },
  {
    title: "运单号规则",
    hide: true,
    dataIndex: "shipment_id_format",
    addDefaultValue: '{y}{m}{d}{inc4}',
    formType: "input"
  },
  // todo 标签代码
  // {
  //   title: "标签代码",
  //   dataIndex: "label_code",
  //   formType: "input"
  // },
  {
    title: "申报后补",
    dataIndex: "declarations_later_added",
    formType: "radio",
    type: 'button',
    hide: true,
    addDefaultValue: 2,
    dict: {
      name: 'declarations_later_added',
      translation: true
    }
  },
  {
    title: "状态",
    dataIndex: "status",
    formType: "radio",
    type: 'button',
    search: true,
    addDefaultValue: 1,
    dict: {
      data: [
        {label: '正常', value: 1},
        {label: '停用', value: 0}
      ],
      translation: true
    },
  },
  {
    title: "是否显示",
    hide: true,
    dataIndex: "is_show",
    formType: "radio",
    type: 'button',
    search: true,
    addDefaultValue: 1,
    dict: {
      data: [
        {label: '是', value: 1},
        {label: '否', value: 0}
      ],
      translation: true
    }
  },
  {
    title: "取消方式",
    hide: true,
    dataIndex: "cancel_method",
    formType: "select",
    addDefaultValue: 1,
    dict: {
      name: 'cancel_method',
      translation: true
    }
  },
  {
    title: "发件人",
    hide: true,
    dataIndex: "from_address",
    formType: "select",
    addDefaultValue: 3,
    dict: {
      name: 'from_address',
      translation: true
    }
  },
  {
    title: "支持报关方式",
    hide: true,
    dataIndex: "exportwith",
    formType: "checkbox",
    addDefaultValue: ['1', '2'],
    multiple: true,
    dict: {name: 'Exportwith', translation: true},
    onControl: (value, maFormObject) => changeDefault(value, maFormObject, 'exportwith')
  },
  {
    title: "默认报关方式",
    hide: true,
    dataIndex: "default_exportwith",
    formType: "radio",
    type: 'button',
    dict: {data: [], translation: true}
  },
  {
    title: "支持清关方式",
    hide: true,
    dataIndex: "importwith",
    formType: "checkbox",
    addDefaultValue: ['1', '2'],
    multiple: true,
    dict: {name: 'Importwith', translation: true},
    onControl: (value, maFormObject) => changeDefault(value, maFormObject, 'importwith')
  },
  {
    title: "默认清关方式",
    hide: true,
    dataIndex: "default_importwith",
    formType: "radio",
    type: 'button',
    dict: {data: [], translation: true}
  },
  {
    title: "支持交税方式",
    hide: true,
    dataIndex: "taxwith",
    formType: "checkbox",
    addDefaultValue: ['1', '2'],
    multiple: true,
    dict: {name: 'Taxwith', translation: true},
    onControl: (value, maFormObject) => changeDefault(value, maFormObject, 'taxwith')
  },
  {
    title: "默认交税方式",
    hide: true,
    dataIndex: "default_taxwith",
    formType: "radio",
    type: 'button',
    dict: {data: [], translation: true}
  },
  {
    title: "支持交货条款",
    hide: true,
    dataIndex: "deliverywith",
    formType: "checkbox",
    addDefaultValue: ['1', '2'],
    multiple: true,
    dict: {name: 'Deliverywith', translation: true},
    onControl: (value, maFormObject) => changeDefault(value, maFormObject, 'deliverywith')
  },
  {
    title: "默认交货条款",
    hide: true,
    dataIndex: "default_deliverywith",
    formType: "radio",
    type: 'button',
    dict: {
      data: [],
      translation: true
    }
  },
  {
    title: "带电标识",
    hide: true,
    dataIndex: "is_battery",
    formType: "radio",
    type: 'button',
    addDefaultValue: '1',
    dict: {
      data: [
        {label: '运单', value: 1},
        {label: '产品', value: 2},
      ],
      translation: true
    }
  },
  {
    title: "地址库规则",
    hide: true,
    dataIndex: "is_validation_address_code",
    formType: "radio",
    type: 'button',
    addDefaultValue: '1',
    dict: {
      name: 'is_validation_address_code',
      translation: true
    }
  },
  {
    title: "国家",
    hide: true,
    dataIndex: "country",
    formType: "select",
    dict: {
      name: 'countrys',
      translation: true,
    },
    multiple: true,
  },

  {
    title: "票计重精度",
    hide: true,
    dataIndex: "shipment_step_weight",
    formType: "input-number",
    addDefaultValue: 0.5,
  },
  {
    title: "箱计重精度",
    hide: true,
    dataIndex: "parcel_step_weight",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "尺寸精度",
    hide: true,
    dataIndex: "step_size",
    formType: "input-number",
    addDefaultValue: 1,
  },
  {
    title: "最小件数",
    hide: true,
    dataIndex: "min_parcel_qty",
    formType: "input-number",
    addDefaultValue: 1,
  },
  {
    title: "最大件数",
    hide: true,
    dataIndex: "max_parcel_qty",
    formType: "input-number",
    addDefaultValue: 200,
  },
  {
    title: "最低箱实重",
    hide: true,
    dataIndex: "min_parcel_actual_weight",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "最低箱材重",
    hide: true,
    dataIndex: "min_parcel_volume_weight",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "最低箱收费重",
    hide: true,
    dataIndex: "min_parcel_chargeable_weight",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "最低箱均重",
    hide: true,
    dataIndex: "min_parcel_average_weight",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "最低票收费重",
    hide: true,
    dataIndex: "min_shipment_chargeable_weight",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "最小票实重",
    hide: true,
    dataIndex: "min_shipment_actual_weight_required",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "最大票实重",
    hide: true,
    dataIndex: "max_shipment_actual_weight_required",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "最小票收费重",
    hide: true,
    dataIndex: "min_shipment_chargeable_weight_required",
    formType: "input-number",
    addDefaultValue: 0,

  },
  {
    title: "最大票收费重",
    hide: true,
    dataIndex: "max_shipment_chargeable_weight_required",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "最小箱实重",
    hide: true,
    dataIndex: "min_parcel_actual_weight_required",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "最大箱实重",
    hide: true,
    dataIndex: "max_parcel_actual_weight_required",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "最小箱收费重",
    hide: true,
    dataIndex: "min_parcel_chargeable_weight_required",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "最大箱收费重",
    hide: true,
    dataIndex: "max_parcel_chargeable_weight_required",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "误差警告",
    hide: true,
    dataIndex: "dif_weight_warning",
    formType: "radio",
    type: 'button',
    addDefaultValue: 0,
    dict: {
      data: [
        {label: '不开启', value: 0},
        {label: '禁止入库', value: 1},
      ]
    }
  },
  {
    title: "误差值",
    hide: true,
    dataIndex: "dif_weight_range_value",
    formType: "input-number",
    addDefaultValue: 0,
  },
  {
    title: "",
    dataIndex: "bit_control",
    hide: true,
    formType: "checkbox",
    customClass: ['service-grid'],
    addDefaultValue: ['22', '21', '16', '11', '6', '5', '4'],
    dict: {
      name: 'BitControl',
    }
  },
  {
    title: "申报币种",
    dataIndex: "currency_type",
    commonRules: {
      required: true,
      message: "请选择支持申报币种"
    },
    formType: "select",
    multiple: true,
    dict: {
      name: 'currencyType',
      props: {label: "title", value: "key"},
      translation: true
    }
  },
  // {
  //   // todo 属性 attrs
  //   title: "属性",
  //   dataIndex: "attrs",
  //   formType: "input"
  // },
  // {
  //   title: "分泡比例",
  //   dataIndex: "volume_weight_radix_ratio",
  //   formType: "input"
  // },
  {
    title: "收费重方式",
    hide: true,
    dataIndex: "charge_weight_type",
    formType: "radio",
    type: 'button',
    addDefaultValue: 1,
    dict: {
      name: 'charge_weight_type',
      translation: true
    }
  },
  {
    title: "签名服务",
    hide: true,
    dataIndex: "signature_service",
    formType: "radio",
    type: 'button',
    addDefaultValue: 1,
    dict: {
      name: 'signature_service',
      translation: true
    }
  },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "更新者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "备注",
    dataIndex: "remark",
    formType: "textarea",
    // addDisplay: false,
    // editDisplay: false,
    hide: true
  }
])
const declarationAction = (record) => {
  declarationFrom.value.open(record)
}
</script>
<script> export default {name: 'logistics:service'} </script>
<style lang="less">
.service-grid .arco-checkbox-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.group-list {
  // border-right: 1px solid var(--color-border-2);
  & li {
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 5px;
    padding: 10px;
    padding-left: 20px;
  }

  & li:hover, & li.active {
    background: var(--color-fill-2);
    color: rgb(var(--primary-5));
  }
}
</style>